<template>
  <div>
    <div id="main" ref="mybox" style="height: 100vh;width: 100%;"></div>
  </div>
</template>
<script>
  import Vue from 'vue'
  import Component, {namespace, Getter} from 'class-component'
  import ECharts from 'echarts'
  import moment from 'moment'
  import getInitials from './provinceToPinyin'

  const ScreenMapDataGetter = namespace('screenMapData', Getter)

  @Component({
    props: {
      mapData: {
        type: Object
      },
      dateTime: {
        type: String,
        default: () => ''
      }

    },
    watch: {
      'mapData': function () {
        let self = this
        self.tempData = []
        self.tempData2 = []
        if (self.timer !== null) {
          clearInterval(this.timer)
        }
        // 因为vue-router 跳转到当前页面时没有刷新 所有重新初始值
        /* self.provinceName = self.$route.query.provinceName
        self.provinceCode = self.$route.query.provinceCode
        let provincePinyin = null
        if (this.provinceName === '陕西') {
          provincePinyin = 'shanxi1'
        } else if (this.provinceName === '山西') {
          provincePinyin = 'shanxi'
        } else {
          provincePinyin = getInitials.convertPinyin(this.provinceName)
        }
        require('echarts/map/js/province/' + provincePinyin) */
        // 如果解决刷新当前界面这段可以删除
        console.log('开始处理数据' + moment().format('HH:mm:ss'))
        if (this.mapData == null) {
          // this.jumpChina()
          return
        }
        this.mapData.highRank.forEach(function (value, index, array) {
          let temp = {
            name: value.name,
            code: value.code,
            rank: value.rank,
            boxoffice: value.boxoffice,
            rounds: value.rounds,
            tickets: value.tickets,
            value: [value.longitude, value.latitude]
          }
          self.tempData.push(temp)
        })
        this.mapData.lowRank.forEach(function (value, index, array) {
          let temp = {
            name: value.name,
            code: value.code,
            rank: value.rank,
            boxoffice: value.boxoffice,
            rounds: value.rounds,
            tickets: value.tickets,
            value: [value.longitude, value.latitude]
          }
          self.tempData2.push(temp)
        })
        console.log('数据处理结束' + moment().format('HH:mm:ss'))
        this.setOptions()
      }
    }
  })
  export default class Map2DEchart extends Vue {
    @ScreenMapDataGetter timer
    @ScreenMapDataGetter provinceTimer
    provinceName = this.$route.query.provinceName
    provinceCode = this.$route.query.provinceCode
    tempData = []
    tempData2 = []
    tempData3 = []
    temp = []
    testChart = null
    chooseFlag = false
    setOptions () {
      let self = this
      console.log('开始渲染地图' + moment().format('HH:mm:ss'))
      this.testChart.setOption({
        backgroundColor: '#3A3A3A',
        title: {
          text: this.$props.dateTime + ' ' + this.provinceName + ' 影城票房分布',
          left: 'center',
          show: false,
          textStyle: {
            color: '#fff'
          },
          z: 8,
          zlevel: 8
        },
        tooltip: {
          show: true,
          trigger: 'item',
          hideDelay: 2000,
          formatter: function (param, callback) {
            return param.name + ' 排名:' + param.data.rank + ' 票房:' + param.data.boxoffice
          }
        },
        geo: {
          map: this.provinceName,
          zoom: this.provinceName === '海南' ? 5 : 1.2,
          scaleLimit: {
            min: 1,
            max: 5
          },
          center: this.provinceName === '海南' ? [109.713561, 18.641382] : null,
          label: {
            normal: {
              show: true,
              fontSize: 16,
              fontWeight: '0',
              color: '#FFF',
              z: 8,
              zlevel: 8
            },
            emphasis: {
              show: true,
              fontSize: 16,
              fontWeight: '0',
              color: '#FFF',
              z: 8,
              zlevel: 8
            }
          },
          roam: true, // 是否开启鼠标缩放和平移漫游
          itemStyle: {
            normal: {
              areaColor: '#323c48',
              borderColor: '#111'
            },
            emphasis: {
              areaColor: '#2a333d'
            }
          }
        },
        series: [
          {
            name: 'top',
            type: 'effectScatter',
            coordinateSystem: 'geo',
            symbolSize: 6,
            itemStyle: {
              normal: {
                color: 'rgb(255, 255, 255)'
              },
              emphasis: {
                shadowBlur: 2,
                shadowColor: '#09F0FF',
                color: '#09F0FF'
              }
            },
            rippleEffect: {
              period: 2,
              scale: 8,
              brushType: 'fill'
            },
            data: this.tempData,
            z: 4,
            zlevel: 4
          },
          {
            name: 'other',
            type: 'scatter',
            coordinateSystem: 'geo',
            hoverAnimation: true, // 是否开启鼠标 hover 的提示动画效果。
            symbolSize: 14,
            symbol: 'pin',
            z: 5,
            zlevel: 5,
            itemStyle: {
              normal: {
                color: 'rgba(37, 140, 249, 0.5)'
              },
              emphasis: {
                shadowBlur: 10,
                shadowColor: 'rgba(37, 140, 249, 0.5)',
                color: '#ff6384',
                borderColor: '#ffff05',
                borderWidth: 1
              }
            },
            data: this.tempData2
          },
          {
            name: 'choose',
            type: 'effectScatter',
            coordinateSystem: 'geo',
            hoverAnimation: true, // 是否开启鼠标 hover 的提示动画效果。
            symbolSize: 20,
            symbol: 'pin',
            z: 6,
            zlevel: 6,
            itemStyle: {
              normal: {
                color: 'rgba(255, 99, 132, 0.8)'
              },
              emphasis: {
                color: '#ff6384',
                borderColor: '#ffff05',
                borderWidth: 1
              }
            },
            rippleEffect: {
              period: 2,
              scale: 2,
              brushType: 'fill'
            },
            data: this.tempData3
          }
        ]
      })
      this.testChart.on('mouseover', function (params) {
        if (params.componentType === 'series') {
          this.chooseFlag = true
        }
      })
      console.log('渲染地图结束' + moment().format('HH:mm:ss'))
      if (self.tempData2.length > 0) {
        let timer = setInterval(function () {
          let num = parseInt(Math.random() * self.tempData2.length)
          self.tempData3 = [self.tempData2[num]]
          self.updateMapData(num)
          self.$store.dispatch('screenMapData/set_showPointData', self.tempData2[num])
        }, 5000)
        self.$store.dispatch('screenMapData/set_Timer', timer)
      } else {
        self.$store.dispatch('screenMapData/set_showPointData', null)
      }
    }
    updateMapData (num) {
      // let self = this
      this.testChart.setOption({
        series: [
          {
            name: 'top',
            data: this.tempData
          },
          {
            name: 'other',
            data: this.tempData2
          },
          {
            name: 'choose',
            data: this.tempData3
          }
        ]
      })
      /* self.highlight(num)
      setTimeout(function () {
        self.downplay(num)
      }, 4000) */
    }
    downplay (num) {
      this.testChart.dispatchAction({
        type: 'downplay',
        seriesIndex: 2,
        dataIndex: num
      })
    }
    highlight (num) {
      this.testChart.dispatchAction({
        type: 'highlight', // tooltip
        // 系列的 index，在 tooltip 的 trigger 为 axis 的时候可选。
        seriesIndex: 2,
        // 数据的 index，如果不指定也可以通过 name 属性根据名称指定数据
        dataIndex: num
        // 可选，数据名称，在有 dataIndex 的时候忽略
      })
    }
    hideTips () {
      this.testChart.dispatchAction({
        type: 'hideTip'
      })
    }
    mounted () {
      let self = this
      if (this.provinceName == null) {
        this.$router.push('/chart/spreadMapSimple')
      }
      let provincePinyin = null
      if (this.provinceName === '陕西') {
        provincePinyin = 'shanxi1'
      } else if (this.provinceName === '山西') {
        provincePinyin = 'shanxi'
      } else {
        provincePinyin = getInitials.convertPinyin(this.provinceName)
      }
      require('echarts-gl')
      require('echarts/map/js/province/' + provincePinyin)
      this.testChart = ECharts.init(this.$refs.mybox)
      this.testChart.on('click', function (result) {
        if (result.componentType === 'series') {
          if (self.provinceTimer !== null) {
            clearInterval(self.provinceTimer)
          }
          if (self.timer !== null) {
            clearInterval(self.timer)
          }
          self.testChart.dispose()
          self.$router.push({path: '/chart/filmTicket', query: {...result.data, provinceKey: self.$route.query.provinceKey, provinceCode: self.provinceCode, provinceName: self.provinceName}})
        }
      })
    }
  }
</script>
